<template>
  <el-dialog
    :title="dialogProps.title"
    :visible.sync="dialogProps.visible"
    width="560px"
    v-loading="loading"
  >
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <el-form
      :data="tOrderModel"
      ref="roleForm"
      label-width="80px"
      label-position="right"
      size="small"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名" prop="tOrderModel.hMemberofthefile.hName">
            <el-input
              :maxlength="32"
              :disabled="dialogProps.title === 'edit' ? false : true"
              v-model="tOrderModel.hMemberofthefile.hName"
              autofocus
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="档案号" prop="tOrderModel.hMemberofthefile.hFn">
            <el-input
              :disabled="dialogProps.title === 'edit' ? false : true"
              :maxlength="32"
              v-model="tOrderModel.hMemberofthefile.hFn"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="体验时间" prop="tOrderModel.orderdate">
            <el-input
              :maxlength="32"
              v-model="tOrderModel.orderdate"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="数据上传">
          <el-upload
                  list-type="picture-card"
                  :http-request="ImgUploadSectionFile"
                  :auto-upload="autoUpload"
                  :before-upload="beforeAvatarUpload"
                  action="" 
                  ref="upload"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
        </el-form-item>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
      <el-button type="primary" size="small" @click="doUpdateRole()"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>


<script>
// 体验上传模态框
import { saveTOrder, updateTOrder } from "@/api/RReporttoupload";
import { upda } from '@/api/setmeal'

export default {
  name: "role-edit",
  data() {
    return {
      Report_ar: false,
      loading: false,
      tOrderModel: {
        Id: "",
        orderdate: "",
        tstatic:"",
        img: "",
        hMemberofthefile: {
          hFn: "",
          hName: "",
          hPhone: "",
        },
      },
       tOrder: {
        Id: "",
        tstatic:"",
        img: "",
      },
      dialogProps: {
        visible: false,
        action: "",
        title: "",
      },
      dialogImageUrl: '',
      autoUpload:true,//自动上传
      dialogVisible: false,
    };
  },

  methods: {
    ImgUploadSectionFile(param) {
      console.log(param);
      console.log(this.type);
      let formdata = new FormData();
      formdata.append("file", param.file);
      this.IconUpload(formdata);
    },
    async IconUpload(file) {
      const res = await upda(file);
      if(res.data.success==true){
        this.FileResult=res.data
        this.tOrderModel.img="/static/"+res.data.message
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //上传图片之前执行
    beforeAvatarUpload(file) {
      console.log("上传图片之前执行")
		  const isJPG = file.type === 'image/jpeg';
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isJPG) {
				this.$message.error('上传套餐图片只能是 JPG 格式!');
			}
			if (!isLt2M) {
				this.$message.error('上传套餐图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //确定事件
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.dialogProps.action === "add") {
            this.doSaveRole();
          } else {
            this.doUpdateRole();
          }
        } else {
          return false;
        }
      });
    },
    doUpdateRole() {
      this.tOrder.Id=this.tOrderModel.id
      this.tOrder.tstatic="1"
      this.tOrder.img=this.tOrderModel.img
      this.loading = true;
      console.log(this.tOrder);
      console.log(this.tOrderModel);
      updateTOrder(this.tOrder)
        .then((response) => {
          this.loading = false;
          this.dialogProps.visible = false;
          this.$emit("save-finished");
        })
        .catch((error) => {
          this.outputError(error);
        });
    },
    doSaveRole() {
      this.loading = true;
      saveRole(this.tOrderModel)
        .then((response) => {
          this.loading = false;
          this.dialogProps.visible = false;
          this.$emit("save-finished");
        })
        .catch((error) => {
          this.outputError(error);
        });
    },
    handleDialogClose() {
      this.dialogProps.visible = false;
    },
    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.loading = false;
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error",
      });
    },
  },
  mounted: function () {
    this.$nextTick(() => {
      this.$on("opendEitReportDialog", function (tOrder) {
        this.tOrderModel = tOrder;
        this.dialogProps.action = "edit";
        this.dialogProps.title = "修改上传";
        this.dialogProps.visible = true;
      });
      this.$on("openAddReportDialog", function () {
        this.dialogProps.action = "add";
        this.dialogProps.title = "添加上传";
        this.tOrderModel = { hMemberofthefile: {} };
        this.dialogProps.visible = true;
      });
    });
  },
};
</script>

